<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .map {
            width: 560px;
            height: 600px;
            background-color: #f0f0f0;
            overflow: hidden;
        }

        .top {
            width: 0;
            height: 0;
            border: 200px solid transparent;
            border-bottom: 400px solid green;
            margin: -200px auto 0;
        }

        .bottom {
            width: 10px;
            height: 200px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- <div class="map">
        <div class="top" style="border-bottom: 400px solid green;"></div>
        <div class="bottom" style="height: 200px;background: green;"></div>
    </div> -->

    <script>
        //要求：
        //在页面渲染一棵树（树木的高度，颜色 ）
        //添加一个初始化方法 ,调用这个方法，页面就呈现一棵树

        //构造函数名称： ShuMu
        // 属性： height ， color
        // 方法： init


        // 构造函数
        function ShuMu(h, c) {
            this.height = h || 400;
            this.color = c || "red";
            this.init = function () {
                var str = '';
                // str +='<div class="map">'
                // str +='    <div '
                // str +='        class="top" '
                // str +='        style="border-bottom: '+this.height+'px solid '+this.color+';"></div>'
                // str +='    <div '
                // str +='        class="bottom"'
                // str +='        style="height:'+(600 - this.height)+'px;background: '+this.color+';"></div>'
                // str +='</div>'

                str +='<div class="map">'
                str +='    <div'
                str +='        class="top"'
                str +='        style="border-bottom: 400px solid green;"></div>'
                str +='    <div'
                str +='        class="bottom"'
                str +='        style="height: 200px;background: green;"></div>'
                str +='</div>'

                document.write(str);
            }
        }

        // 实例对象
        var obj = new ShuMu(350, "purple");
        obj.init();
    </script>
</body>

</html>